<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fun1(){
            alert("单机了");
        }  function fun2(){
            alert("单机了2");
        }
        function fun7(){
            console.log("按下了键盘");
        }
        function fun8(){
            console.log("抬起了键盘");
        }
// onfocus 获得焦点  元素获得焦点时触发  常用于表单验证
// onblur 失去焦点  元素失去焦点时触发  常用于表单验证
// onchange 内容发生改变  失去焦点并内容发生改变才会触发  在下拉框也会触发
// onchange="testChange(this.value) 获取改变的值
// onsubmit 表单提交  点击提交按钮时触发  常用于表单验证
// onreset 表单重置  点击重置按钮时触发  常用于表单验证

        function testFocus(){
            console.log("获得焦点");
        }
        function testBlur(){
            console.log("失去焦点");
        }
        function testChange(value){
              console.log("内容改变"+value);
        }
        function testChange2(value){
            console.log("内容改变为"+value);
        }

        function testSubmit(){
            // alert("表单发送提交了");
            // 在这里我们有机会阻止表单的提交
            // confirm("确定要提交表单吗") 
            console.log("表单发送提交了");
            // 有返回值的confirm 如果确认提交
            var flag =confirm("确定要提交表单吗");
            // if(!flag){
            // event.preventDefault();//阻止组件的默认行为 表单的提交
            // }

            // 第二种方式return true 或者 false 阻止表单的提交 在表单绑定的事件上也要加上return
            if(!flag){
                return false;//阻止组件的默认行为 表单的提交

            }
            return true;
        }
        function testReset(){
            alert("表单重置了")
        }

    </script>
</head>
<body>
    <form action="test.html" method="get"  onSubmit="return testSubmit()" onreset="testReset()">
        用户昵称:<input type="text" name="username" 
        onfocus="testFocus()"
        onblur="testBlur()"
        onchange="testChange(this.value)"
        <!-- this.value 获得改变的值 -->
        ><br>
        密码:<input type="password" name="password"><br>

        <select onchange="testChange2(this.value)">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>

        </select>
        <input type="submit" value="注册">
        <input type="reset" value="清空">
    </form>
    <hr>
    <input type="button" value="按钮" onclick="fun1(),fun2()">
    <input type="text" onkeydown="fun7()" onkeyup="fun8()">

</body>
</html>